// js/utils/TextRenderer.js
export default class TextRenderer {
  constructor(ctx, screenAdapter) {
    this.ctx = ctx;
    this.screenAdapter = screenAdapter;
    // 获取设备像素比
    this.dpr = this.screenAdapter.pixelRatio;
    // 使用系统字体栈，渲染效果更好
    this.systemFont = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
  }

  /**
   * 绘制清晰文字
   * @param {string} text - 文字内容
   * @param {number} x - x坐标（设计坐标）
   * @param {number} y - y坐标（设计坐标）
   * @param {string} font - 字体样式
   * @param {string} color - 颜色
   * @param {string} align - 对齐方式
   * @param {string} baseline - 基线对齐
   */
  drawText(text, x, y, font, color, align = 'left', baseline = 'top') {
    const ctx = this.ctx;
    const scale = this.screenAdapter.scale;

    // 保存当前状态
    ctx.save();

    // 设置字体样式
    ctx.font = font;
    ctx.fillStyle = color;
    ctx.textAlign = align;
    ctx.textBaseline = baseline;

    // // 计算实际绘制位置（考虑缩放和像素对齐）
    // let actualX = x * scale;
    // let actualY = y * scale;

    // // 像素对齐 - 四舍五入到最近的整数像素
    // actualX = Math.round(actualX);
    // actualY = Math.round(actualY);

    // 绘制文字
    ctx.fillText(text, x, y);
    // 恢复状态
    ctx.restore();
  }

  /**
   * 绘制带描边的清晰文字
   */
  drawTextWithStroke(text, x, y, font, color, strokeColor, strokeWidth = 2, align = 'left', baseline = 'top') {
    const ctx = this.ctx;
    const scale = this.screenAdapter.scale;

    ctx.save();

    ctx.font = font;
    ctx.fillStyle = color;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;
    ctx.textAlign = align;
    ctx.textBaseline = baseline;

    let actualX = x * scale;
    let actualY = y * scale;

    actualX = Math.round(actualX);
    actualY = Math.round(actualY);

    // 先绘制描边
    ctx.strokeText(text, actualX, actualY);
    // 再绘制填充
    ctx.fillText(text, actualX, actualY);

    ctx.restore();
  }

  /**
 * 在Canvas上绘制一个边框
 * @param {number} x - 边框左上角的x坐标 (逻辑坐标)
 * @param {number} y - 边框左上角的y坐标 (逻辑坐标)
 * @param {number} width - 边框的宽度 (逻辑坐标)
 * @param {number} height - 边框的高度 (逻辑坐标)
 * @param {string} color - 边框颜色，支持 'rgba(R, G, B, A)' 格式
 * @param {number} lineWidthRpx - 边框宽度，以 rpx 为单位
 */
  drawBorder(x, y, width, height, color, lineWidthRpx) {
    // 2. 将 rpx 转换为逻辑像素
    const rpxToPixelRatio = this.screenAdapter.DESIGN_WIDTH / 750; // 1624 / 750
    const lineWidth = lineWidthRpx * rpxToPixelRatio;

    // 3. 设置边框样式
    this.ctx.strokeStyle = color; // 设置颜色
    this.ctx.lineWidth = lineWidth; // 设置线宽

    // 4. 绘制边框
    // strokeRect(x, y, width, height) 会直接绘制一个矩形边框
    // 注意：线宽会向路径内外各延伸一半。一个2px的线，会1px在矩形内部，1px在矩形外部。
    // 如果希望边框完全在矩形内部，需要调整绘制区域。
    // 但通常 strokeRect 的行为是符合预期的。
    this.ctx.strokeRect(x, y, width, height);
  }

  /**
 * 在Canvas上绘制矩形的一条边框
 * @param {number} x - 矩形左上角的x坐标 (逻辑坐标)
 * @param {number} y - 矩形左上角的y坐标 (逻辑坐标)
 * @param {number} width - 矩形的宽度 (逻辑坐标)
 * @param {number} height - 矩形的高度 (逻辑坐标)
 * @param {string} side - 要绘制的边: 'top', 'bottom', 'left', 'right'
 * @param {string} color - 边框颜色
 * @param {number} lineWidthRpx - 边框宽度，以 rpx 为单位
 */
  drawSingleSideBorder(x, y, width, height, side, color, lineWidthRpx) {
    const ctx = this.ctx;
    // 2. 将 rpx 转换为逻辑像素
    const rpxToPixelRatio = this.screenAdapter.DESIGN_WIDTH / 750;
    const lineWidth = lineWidthRpx * rpxToPixelRatio;

    // 3. 设置边框样式
    ctx.strokeStyle = color;
    ctx.lineWidth = lineWidth;

    // 4. 开始绘制路径
    ctx.beginPath();

    // 5. 根据要绘制的边，确定起点和终点
    switch (side) {
      case 'top':
        // 画上边：从左上角到右上角
        ctx.moveTo(x, y);
        ctx.lineTo(x + width, y);
        break;

      case 'bottom':
        // 画下边：从左下角到右下角
        ctx.moveTo(x, y + height);
        ctx.lineTo(x + width, y + height);
        break;

      case 'left':
        // 画左边：从左上角到左下角
        ctx.moveTo(x, y);
        ctx.lineTo(x, y + height);
        break;

      case 'right':
        // 画右边：从右上角到右下角
      ctx.moveTo(x + width, y);
        ctx.lineTo(x + width, y + height);
        break;

      default:
        console.error('Invalid side specified. Use "top", "bottom", "left", or "right".');
        return; // 如果side参数无效，则不绘制
    }

    // 6. 渲染路径
    ctx.stroke();
  }


}
